<template>
  

  <!-- 平台统计 -->
  <el-card shadow="never" class="mb-15">
    <template #header>
      <div class="card-header">
        <span>平台统计</span>
      </div>
    </template>
    <el-row :gutter="20">
      <el-col :xs="12" :sm="12" :md="6" v-for="(item, index) in statistics" :key="index">
        <div class="stat-card" :class="item.class">
          <div class="stat-content">
            <div class="stat-value">{{ item.value }}</div>
            <div class="stat-label">{{ item.label }}</div>
          </div>
          <div class="stat-icon">
            <el-icon><component :is="item.icon" /></el-icon>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
  <el-row :gutter="15" class="mb-15">
    <!-- 快捷方式 -->
    <el-col :xs="24" :sm="24" :md="6" :lg="6">
      <el-card shadow="never" class="full-height-card">
        <template #header>
          <div class="card-header">
            <span>快捷方式</span>
          </div>
        </template>
        <el-carousel 
          :interval="10000" 
          trigger="click" 
          height="180px"
          :autoplay="true"
          indicator-position="outside"
          @change="handleCarouselChange"
        >
          <el-carousel-item v-for="page in Math.ceil(shortcuts.length / 8)" :key="page">
            <el-row :gutter="10">
              <el-col 
                :span="6" 
                v-for="(item, index) in shortcuts.slice((page - 1) * 8, page * 8)" 
                :key="index"
              >
                <div class="shortcut-item" @click="handleShortcut(item)">
                  <el-icon><component :is="item.icon" /></el-icon>
                  <span>{{ item.label }}</span>
                </div>
              </el-col>
            </el-row>
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </el-col>

    <!-- 待办事项 -->
    <el-col :xs="24" :sm="24" :md="6" :lg="6">
      <el-card shadow="never" class="full-height-card">
        <template #header>
          <div class="card-header">
            <span>待办事项</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="todo-item">
              <div class="todo-label">待审评论</div>
              <div class="todo-value">66</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="todo-item">
              <div class="todo-label">待发帖子</div>
              <div class="todo-value">12</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="todo-item">
              <div class="todo-label">待审商品</div>
              <div class="todo-value">99</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="todo-item">
              <div class="todo-label">待发货</div>
              <div class="todo-value">20</div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-col>

    <!-- 成交占比 -->
    <el-col :xs="24" :sm="24" :md="6" :lg="6">
      <el-card shadow="never" class="full-height-card">
        <template #header>
          <div class="card-header">
            <span>成交占比</span>
          </div>
        </template>
        <scEcharts height="180px" :option="pieOption" />
      </el-card>
    </el-col>

    <!-- 版本信息 -->
    <el-col :xs="24" :sm="24" :md="6" :lg="6">
      <el-card shadow="never" class="full-height-card">
        <template #header>
          <div class="card-header">
            <span>版本信息</span>
          </div>
        </template>
        <div class="version-info">
          <div class="info-item">
            <span class="label">当前版本</span>
            <span class="value">v1.1.0 pro</span>
            <el-tag size="small" type="primary" class="ml-10">日志</el-tag>
            <el-tag size="small" type="success" class="ml-10">检查更新</el-tag>
          </div>
          <div class="info-item">
            <span class="label">基于框架</span>
            <span class="value">scui-v1.0.0</span>
          </div>
          <div class="info-item">
            <span class="label">主要特色</span>
            <span class="value">单页面 / 响应式 / 清爽 / 极简</span>
          </div>
          <div class="info-item">
            <span class="label">获取渠道</span>
            <el-button type="danger" size="small">获取授权</el-button>
            <el-button type="success" size="small" class="ml-10">立即下载</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <!-- 实时概况 -->
  <el-card shadow="never" class="mb-15">
    <template #header>
      <div class="card-header">
        <span>实时概况</span>
      </div>
    </template>
    <el-row :gutter="20">
      <el-col :xs="12" :sm="12" :md="6" v-for="(item, index) in realtime" :key="index">
        <div class="overview-item">
          <div class="overview-icon">
            <el-icon><component :is="item.icon" /></el-icon>
          </div>
          <div class="overview-info">
            <div class="overview-value">{{ item.value }}</div>
            <div class="overview-label">{{ item.label }}</div>
            <div class="overview-compare">
              昨日：{{ item.yesterday }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { 
  Collection, 
  User, 
  ShoppingCart, 
  ChatDotRound,
  Money,
  ShoppingBag,
  Plus,
  Service,
  Monitor,
  Odometer,
  Grid,
  Document,
  Setting,
  Tools,
  Menu as MenuIcon
} from '@element-plus/icons-vue'
import scEcharts from '@/components/scEcharts'

export default {
  name: 'Statistics',
  components: {
    scEcharts,
    Collection,
    User,
    ShoppingCart,
    ChatDotRound,
    Money,
    ShoppingBag,
    Plus,
    Service,
    Monitor,
    Odometer,
    Grid,
    Document,
    Setting,
    Tools,
    MenuIcon
  },
  setup() {
    const shortcuts = ref([
      { label: '主页一', icon: 'Monitor', path: '/dashboard' },
      { label: '主页二', icon: 'Odometer', path: '/usercenter' },
      { label: '弹层', icon: 'Grid', path: '/vab/mini' },
      { label: '删除', icon: 'User', path: '/vab/iconfont' },
      { label: '进度条', icon: 'Document', path: '/vab/chart' },
      { label: '用户', icon: 'User', path: '/vab/statistic' },
      { label: '设置', icon: 'Setting', path: '/vab/qrcode' },
      { label: '更多', icon: 'MenuIcon', path: '/more' },
      { label: '主页一', icon: 'Monitor', path: '/dashboard' }
    ])

    const statistics = ref([
      { 
        label: '课程总数量', 
        value: 6, 
        icon: 'Collection', 
        class: 'blue-card'
      },
      { 
        label: '用户总量', 
        value: 34, 
        icon: 'User', 
        class: 'pink-card'
      },
      { 
        label: '课程订单总量', 
        value: 3, 
        icon: 'ShoppingCart', 
        class: 'purple-card'
      },
      { 
        label: '评价总量', 
        value: 0, 
        icon: 'ChatDotRound', 
        class: 'orange-card'
      }
    ])

    const realtime = ref([
      { label: '销售额(元)', value: '0.00', yesterday: '0.00', icon: 'Money' },
      { label: '支付订单数', value: '0', yesterday: '0', icon: 'ShoppingBag' },
      { label: '新增用户数', value: '3', yesterday: '2', icon: 'User' },
      { label: '下单用户数', value: '0', yesterday: '0', icon: 'Service' }
    ])

    const pieOption = ref({
      title: {
        show: false
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '50%'],
          label: {
            show: true
          },
          data: [
            { value: 35, name: '电子产品' },
            { value: 25, name: '化妆品' },
            { value: 15, name: '服装' },
            { value: 25, name: '家居' }
          ]
        }
      ],
      color: ['#36CBCB', '#1890FF', '#9E95F5', '#FF9F43']
    })

    // 添加当前活动点的状态
    const activeShortcutDot = ref(0)
    const activeTodoDot = ref(0)
    let shortcutTimer = null
    let todoTimer = null

    // 自动切换点点
    const startAutoSwitch = () => {
      shortcutTimer = setInterval(() => {
        activeShortcutDot.value = activeShortcutDot.value === 0 ? 1 : 0
      }, 5000)

      todoTimer = setInterval(() => {
        activeTodoDot.value = activeTodoDot.value === 0 ? 1 : 0
      }, 5000)
    }

    // 手动切换点点
    const switchDot = (type, index) => {
      if (type === 'shortcut') {
        activeShortcutDot.value = index
      } else if (type === 'todo') {
        activeTodoDot.value = index
      }
    }

    onMounted(() => {
      startAutoSwitch()
    })

    onUnmounted(() => {
      if (shortcutTimer) clearInterval(shortcutTimer)
      if (todoTimer) clearInterval(todoTimer)
    })

    const handleShortcut = (item) => {
      if (item.path) {
        window.location.hash = item.path
      }
    }

    const handleCarouselChange = (newIndex) => {
      activeShortcutDot.value = newIndex
    }

    return {
      shortcuts,
      statistics,
      realtime,
      pieOption,
      handleShortcut,
      activeShortcutDot,
      activeTodoDot,
      switchDot,
      handleCarouselChange
    }
  }
}
</script>

<style scoped>
.mb-15 {
  margin-bottom: 15px;
}

.ml-10 {
  margin-left: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-dots {
  display: none;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ddd;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: var(--el-color-primary);
}

/* 快捷方式样式 */
.shortcut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  border-radius: 4px;
}

.shortcut-item:hover {
  background-color: var(--el-color-primary-light-9);
  transform: translateY(-2px);
}

.shortcut-item .el-icon {
  font-size: 22px;
  margin-bottom: 4px;
  color: var(--el-color-primary);
}

.shortcut-item span {
  font-size: 12px;
  color: var(--el-text-color-primary);
}

/* 统计卡片样式 */
.stat-card {
  padding: 20px;
  border-radius: 4px;
  color: white;
  position: relative;
  overflow: hidden;
  height: 120px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px 0 rgba(0,0,0,0.15);
}

.blue-card {
  background: linear-gradient(135deg, #1890FF 10%, #36CBCB 100%);
}

.pink-card {
  background: linear-gradient(135deg, #FF6B6B 10%, #FF8E8E 100%);
}

.purple-card {
  background: linear-gradient(135deg, #7367F0 10%, #9E95F5 100%);
}

.orange-card {
  background: linear-gradient(135deg, #FF9F43 10%, #FFB976 100%);
}

.stat-content {
  flex: 1;
  z-index: 1;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
}

.stat-icon {
  position: absolute;
  right: -10px;
  bottom: -10px;
  font-size: 80px;
  opacity: 0.2;
  transform: rotate(-15deg);
}

/* 待办事项样式 */
.todo-item {
  padding: 10px;
  background-color: var(--el-color-primary-light-9);
  border-radius: 4px;
  margin-bottom: 10px;
}

.todo-label {
  font-size: 14px;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
}

.todo-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-color-primary);
  line-height: 1;
}

/* 实时概况样式 */
.overview-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  background:  var(--el-color-primary-light-9);
  transition: all 0.15s;
}

.overview-item:hover {
  background: var(--el-color-primary-light-9);
  transform: translateY(-2px);
}

.overview-icon {
  font-size: 32px;
  margin-right: 15px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(64,158,255,0.1);
  color: #409EFF;
}

.overview-info {
  flex: 1;
}

.overview-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  line-height: 1.2;
}

.overview-label {
  font-size: 14px;
  color: #606266;
  margin: 5px 0;
}

.overview-compare {
  font-size: 12px;
  color: #909399;
}

/* 版本信息样式 */
.version-info {
  
}

.info-item {
  display: flex;
  align-items: center;
  line-height: 42px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item .label {
  width: 80px;
  color: var(--el-text-color-secondary);
}

.info-item .value {
  flex: 1;
  color: var(--el-text-color-primary);
}

.full-height-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.full-height-card :deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow: hidden;
}

.full-height-card :deep(.el-card__header) {
  padding: 10px;
}

/* 轮播样式覆盖 */
:deep(.el-carousel__container) {
  height: 160px !important;
}

:deep(.el-carousel__item) {
  padding: 0;
  overflow: hidden;
}

:deep(.el-row) {
  height: 100%;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .el-col {
    margin-bottom: 15px;
  }
  
  .full-height-card {
    height: auto;
  }
  
  .shortcut-item {
    padding: 5px 0;
  }
  
  .shortcut-item .el-icon {
    font-size: 20px;
    margin-bottom: 3px;
  }
  
  .shortcut-item span {
    font-size: 11px;
  }
  
  .stat-card {
    height: 100px;
  }
  
  .stat-value {
    font-size: 28px;
  }
  
  .stat-icon {
    font-size: 60px;
  }
  
  .todo-item {
    padding: 10px;
  }
  
  .todo-value {
    font-size: 20px;
  }
  
  .overview-item {
    padding: 10px;
  }
  
  .overview-icon {
    font-size: 24px;
    padding: 8px;
  }
  
  .overview-value {
    font-size: 20px;
  }
  
  .info-item {
    flex-wrap: wrap;
  }
  
  .info-item .label {
    width: 100%;
    margin-bottom: 5px;
  }
}
</style> 